<template>
	<!-- 添加成员 -->
	<view>
		<view class="toptext">
			<text class="text">{{title}}</text>
		</view>
		<view class="boximg">
			<text>头像</text>
			<image :src="src"></image>
		</view>
		<view class="item">
			<text class="text">员工名称:</text>
			<input class="input" type="text" v-model="empname" placeholder="请输入员工名称">
		</view>
		<view class="item">
			<text class="text">员工账号:</text>
			<text class="text1">{{account}}</text>
			<button class="btn" @click="setaccount" size="mini">更新</button>
		</view>
		<view class="item">
			<text class="text">联系方式:</text>
			<input class="input" v-model="tel" type="number" maxlength="11" placeholder="请输入联系方式">
		</view>
		<view class="item">
			<text class="text">联系地址:</text>
			<input class="input" v-model="address" type="text" placeholder="请输入联系地址">
		</view>
		<view class="item">
			<text class="text">员工年龄:</text>
			<input class="input" v-model="age" type="text" placeholder="请输入员工年龄">
		</view>
		<view class="item">
			<text class="text">员工性别:</text>
			<select v-model="sex">
				<option disabled value="">请选择</option>
				<option>男</option>
				<option>女</option>
			</select>
		</view>
		<view class="item">
			<text class="text">所属部门:</text>
			<select v-model="departmentid">
				<option disabled value="">请选择</option>
				<option v-for="dept in option" :key="dept.dptid" :value="dept.dptid">{{dept.dptname}}</option>
			</select>
		</view>
		<view class="btn1">
			<button @click="inst">保存</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title:'添加成员',option:{},
				src:'http://localhost:3000/static/logoimg/31fffcda50205d8b1433dae8551ad37b.png',
				empname:'',account:'',tel:'',address:'',age:'',sex:'',departmentid:''
			}
		},
		onLoad() {
			this.setaccount();
			this.getdata();
		},
		methods: {
			setaccount(){
				this.account = Math.round(Math.random()*1000000)
			},
			async getdata(){
				const res = await this.Request({
					url:'api/department/getalldptname'
				})
				this.option = res.data
			},
			async inst(){
				var arr = [];
				const res = await this.Request({
					url:'api/login/login_em_ac'
				})
				for(let i= 0;i<res.data.length;i++) {
				     arr[i] = res.data[i].account;
				}
				if(arr.includes(this.account.toString())){
					uni.showToast({
						icon:"error",
						title:'账号已存在'
					})
				}else{
					if(this.empname.replace(/\s*/g,"").length == 0 ||
					   this.tel.replace(/\s*/g,"").length < 11 ||
					   this.departmentid == '' ||
					   this.sex == ''){
						uni.showToast({
							icon:"error",
							title:'内容不可为空'
						})
					} else {
						const res = await this.Request({
							url:'api/employee/empadd',
							method:'PUT',
							data:{empname:this.empname,tel:this.tel,departmentid:this.departmentid,
								  age:this.age,sex:this.sex,address:this.address,
								  account:this.account,password:"war123456",headimg:this.src}
						})
						if(res.data.affectedRows=1){
							uni.showToast({
								title: '添加成功'
							})
							setTimeout(() => {
								uni.reLaunch({
									url:'/pages/super/superpage/empment'
								})
							},500)
						}
					}
				}
			},
		}
	}
</script>

<style lang="scss">
	.toptext{
		width: 100%;
		background-color: #efefef;
		display: flex;
		border-bottom: 1px solid #ccc;
		.text{
			margin: 5px 0 5px 5px;
			font-size: 110%;
			font-weight: 700;
			color: #d3d3d3;
		}
	}
	.boximg{
		height: 80px;
		width: 100%;
		display: flex;
		position: relative;
		border-radius: 10px;
		border-top: 2px solid #d3d3d3;
		border-bottom: 2px solid #d3d3d3;
		text{
			font-family: 'Courier New';
			font-size: 130%;
			font-weight: 800;
			margin:auto 0;
			margin-left: 20px;
		}
		image{
			position: absolute;
			margin: 10px 0 10px 140px;
			height: 60px;
			width: 60px;
		}
	}
	.item{
		display: flex;
		margin-top: 5px;
		border-top: 1px solid #a2a2a2;
		border-bottom: 1px solid #a2a2a2;
		border-radius: 10px;
		select{
			width: 80px;
			border-radius: 10px;
			margin:0 0 5px 35px;
		}
		.text{
			margin: 10px 0 10px 20px;
			font-size: 17px;
			font-weight: 700;
		}
		.text1{
			margin: 10px 0 10px 35px;
		}
		.input{
			margin: 10px 0 10px 36px;
			font-size: 15px;
			font-weight: 500;
		}
		.btn{
			margin: auto;
		}
	}
	.btn1{
		width: 50%;
		margin: 20px 0  0 25%;
	}
</style>
